<template>
	<div class="image-list">
		<div class="desc">
			<div>{{detailInfo.desc}}</div>
			<div>{{imageList.key}}</div>
		</div>
		<div class="image-list">
			<img 
				:src="item" 
				alt="" 
				v-for="item in imageList.list"
				@load="imgLoad"
			>
		</div>
	</div>
</template>

<script>
	export default {
		name:'ImageInfo',
		props:{
			detailInfo:Object
		},
		data(){
			return {
				imageList:[],
				imageLength:0,
				count:1
			}
		},
		watch:{
			detailInfo(){
				this.imageList = this.detailInfo.detailImage[0];
				this.imageLength = this.imageList.list.length;
			}
		},
		methods:{
			imgLoad(){
				if( ++this.count == this.imageLength ){
					this.$emit('imgLoad')
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.image-list{
		font-size: 0.373333rem;
	}
	.image-list,.image-list img {
		width: 100%;
		height: auto;
	}
</style>
